<template>
	<view class="item-container" @tap="toDetail">
		<view class="top">
			<!--  mode="aspectFill"：按照原始比例缩放图片，使图片的长边能完全显示在容器内，可能会露出空白区域。 -->
			<image mode="aspectFill" class="headimg" :src="info.userHeadimg"></image>
			<view class="name-c">
				<view class="name">{{info.userName}}</view>
				<!-- 显示经过处理函数的变量info.createdAt的值，处理函数为$tool.showShortTime -->
				<view class="time">{{info.setTopAt && $tool.showShortTime(info.setTopAt)}}</view>
			</view>
			<!-- 判断变量info.set_top_at为真时显示 -->
			<!-- <text class="set-top-text" v-if="info.set_top_at">置顶</text> -->
			<!-- 当用户点击该元素时，触发likeOrCancel事件，stop是阻止事件的默认行为。该元素的样式中的actived属性会根据isLike的值来决定是否显示 -->
			<text class="new-iconfont icon-heart" @tap.stop="likeOrCancel" :class="{actived: isLike}"></text>
		</view>
		<view class='body'>
			<view class="text">{{info.text}}</view>
			<!-- 如果info对象中的images属性不为空，显示图片，最多显示3张图片 -->
			<view v-if="info.images" @tap="previewImage(info.images, index)" class="image-c" :class="'image-c-' + imageList">
				<!-- 
					image标签的v-for指令会遍历循环变量imageList数组中的每个url，并添加为每张图片的src属性的元素 
					mode="aspectFill"：按照原始比例缩放图片，使图片的长边能完全显示在容器内，可能会露出空白区域
				-->
				<image mode="aspectFill" v-for="(url, index) in imageList" :src="url" ></image>
			</view>
			<view class="bottom">
				<text class="new-iconfont icon-comment"></text>
				<text class="comment-total">{{info.commentNumber}}</text>
				<view class="tag">#{{info.tagTitle}}</view>
				<view class="brank"></view>
				<text class="new-iconfont icon-more"></text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		props: {
			info: {
				type: Object
			}
		},
		computed: {
			imageList() {
				return this.info.images
			},
			isLike: {
				get() {
					return this.info.collectionType
				},
				set(val) {
					this.info.is_liked = val
				}
			}
		},
		onLoad() {},
		onShow() {
			console.log("111",this.info)
		},
		methods: {
			async likeOrCancel() {
			      // this.isLike = !this.isLike;
					// debugger
			      await this.$http(`/topics/collect/${this.info.id}/${!this.isLike}`, 'GET', {
			        // 'type': 'like_or_cancel'
			      })
						this.$emit('like_or_cancel', {...this.info, isLike:!this.isLike})
			    },
			toDetail() {
				uni.navigateTo({
					url: '/pages/topic/topicDetail'
				})
				// 存储缓存中
				uni.setStorageSync('topicDetailInfo', this.info)
			},
			previewImage(urls, index) {
				uni.previewImage({
					urls: urls,
					current: index
				})
			},
		},
	
		onPageScroll(e) {}
	}
</script>

<style lang="scss" scoped>
	.item-container {
		padding-bottom: 20rpx;
		margin-bottom: 20rpx;
		border-bottom: 1rpx solid #E7E7E7;

		.top {
			display: flex;
			align-items: center;
			justify-content: center;

			.headimg {
				width: 72rpx;
				height: 72rpx;
				border-radius: 50%;
				margin-right: 20rpx;
			}

			.name-c {
				flex-grow: 1;

				.name {
					font-size: 30rpx;
					font-weight: 500;
					color: #fff;
					// line-height: 30rpx;
					margin-bottom: 6rpx;
					width: 400rpx;

					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 1;
					-webkit-box-orient: vertical;
				}

				.time {
					font-size: 22rpx;
					font-weight: 500;
					color: #8C939B;
					// line-height: 30rpx;
				}
			}

			.set-top-text {
				margin-right: 20rpx;
				font-size: 22rpx;
				border: 1px solid red;
				color: red;
				padding: 0rpx 10rpx;
				border-radius: 10rpx;
			}

			.icon-heart {
				font-size: 40rpx;
				color: #eee;

				&.actived {
					color: red;
				}

			}
		}

		.body {
			.text {
				font-size: 28rpx;
				// font-weight: 500;
				color: #fff;
				line-height: 38rpx;
				padding: 20rpx 0rpx;
				text-align: justify;
				
			}

			.image-c {
				image {
					width: 212rpx;
					height: 174rpx;
					border-radius: 20rpx;
					margin-right: 22rpx;

					&:nth-child(3n) {
						margin-right: 0rpx;
					}
				}

				// &.image-c-1 {
				// 	image {
				// 		width: 100%;
				// 		height: 290rpx;
				// 	}
				// }
			}
		}

		.bottom {
			font-weight: 500;
			color: #B7BBC3;
			display: flex;
			align-items: center;
			font-size: 36rpx;
			margin-top: 10rpx;

			.comment-total {
				margin-left: 10rpx;
				font-size: 28rpx;
			}

			.tag {
				padding: 4rpx 20rpx;
				border-radius: 20rpx;
				background-color: #f1f1f1;
				color: #B7BBC3;
				font-size: 20rpx;
				margin-left: 20rpx;
			}

			.brank {
				flex: 1;
				height: 1rpx;
			}

		}
	}
</style>
